<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实验二</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link href="css/home.e03241c9.css" rel="stylesheet">
</head>
<body>
    <div class="home-brick-box home-brick-row-2-box xm-plain-box" id="app">
        <div class="box-hd">
            <h2 class="title">手机</h2>
            <div class="more"><a href="#" class="more-link">查看更多<i class="iconfont iconfont-arrow-right-big"></i></a></div>
        </div>
        <div class="box-bd clearfix">
            <div class="row">
                <div class="span4"><ul class="brick-promo-list clearfix"><li class="brick-item brick-item-l"><a><img src="images/ad1.png"></a></li></ul></div>
                <div class="span16"><ul class="brick-list clearfix">
                        <li v-for="phonelist in phoneList" class="brick-item brick-item-m brick-item-m-2">
                            <a href="#">
                                <div class="figure figure-img"><img width="160" height="160" v-bind:src="phonelist.img"></div>
                                <h3 class="title">{{phonelist.title}}</h3>
                                <p class="desc">{{phonelist.des}}</p>
                                <p class="price"><span class="num">{{phonelist.price}}</span></p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    const app = Vue.createApp({
            data() {
                return {
                    myNumber: 1,
                    phoneList:[
                        {
                        id:'100081',
                        img:'images/phone1.png',
                        title:'Redmi K50 电竞版',
                        des:'全线拉满的冷血旗舰',
                        price:'3299 元起'
                        },
                        {
                        id:'100082',
                        img:'images/phone2.png',
                        title:'Xiaomi 12 Pro',
                        des:'全新骁龙8|2k AMOLED屏幕',
                        price:'4699 元起'
                        },
                        {
                        id:'100083',
                        img:'images/phone3.png',
                        title:'Xiaomi 12',
                        des:'全新骁龙8 | 5000万主摄',
                        price:'3699 元起'
                        },
                        {
                        id:'100084',
                        img:'images/phone4.png',
                        title:'Xiaomi 12X',
                        des:'骁龙870 | 5000万主摄',
                        price:'2999 元起'
                        },
                        {
                        id:'100085',
                        img:'images/phone5.png',
                        title:'Xiaomi 11 青春活力版',
                        des:'轻薄5G，内外皆出彩',
                        price:'1899 元起'
                        },
                        {
                        id:'100086',
                        img:'images/phone6.png',
                        title:'Redmi Note 11 Pro系列',
                        des:'三星AMOLED高刷屏',
                        price:'1799 元起'
                        },
                        {
                        id:'100087',
                        img:'images/phone7.png',
                        title:'Redmi Note 11 5G',
                        des:'5000mAh大电量',
                        price:'1199 元起'
                        },
                        {
                        id:'100088',
                        img:'images/phone8.png',
                        title:'Redmi Note 11 4G',
                        des:'5000mAh大电量',
                        price:'969 元起'
                        },
                        
                    ]
                }
            },
           
        })
        app.mount('#app')
</script>
</html>